 <template>
  <div>
    <!-- 新增按钮 -->
    <el-button class="addBtn" type="primary" plain>新增</el-button>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="storeId"
        label="账号"
        width="220">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="220">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话"
        width="240">
      </el-table-column>
      <el-table-column
        prop="position"
        label="职位"
        width="220">
      </el-table-column>
      <el-table-column
        prop="state"
        width="220"
        label="状态">
      </el-table-column>
      <el-table-column
        prop="orderMoney"
        label="操作">
        <template slot-scope="{row}">
          <el-link type="primary" @click="edit(row.id)">编辑</el-link>
          <el-link type="warning" @click="openSto">停用</el-link>
          <el-link type="danger" @click="openDel">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑弹框 -->
    <el-dialog
      title="编辑账号"
      :visible="dialogVisible"
      width="30%"
      :before-close="handleClose" @close="dialogVisible = false">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
          <el-form-item label="密码">
          <el-input v-model="form.userPswd" ></el-input>
        </el-form-item>
          <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
          <el-form-item label="职位">
          <el-input v-model="form.position"></el-input>
        </el-form-item>
            <!-- <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[1,2]"
            :props="defaultProps">
            </el-tree> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {getAccount} from '@/api/system'
export default {
  created(){
    this.getAccount()
  },
  data () {
    return {
      dialogVisible: false,
      data: [{
        id: 1,
        label: '店铺管理',
        children: [{
          id: 4,
          label: '店铺列表'
        },
        {
          id: 4,
          label: '商品列表'
        }, {
          id: 4,
          label: '开店审核'
        },
        {
          id: 4,
          label: '店铺权益管理'
        }]
      },
      {
        id: 2,
        label: '商圈管理',
        children: [{
          id: 5,
          label: '共享商圈'
        }, {
          id: 6,
          label: '个人商圈'
        }]
      }],

      defaultProps: {
        children: 'children',
        label: 'label'
      },

      tableData: [],
      // [{
      //   storeId: '3283928081',
      //   name: '美宜佳-保利店',
      //   industry: '便利百货',
      //   orderNum: 300,
      //   orderMoney: 9099887,
      //   refundsNum: 3455,
      //   refundsRate: 5.629,
      //   confirmRefundsNum: 2371,
      //   confirmRefundsMoney: 86241,
      //   confirmRefundsRate: 4.232
      // }, {
      //   storeId: '9032839280',
      //   name: '美宜佳-保利店',
      //   industry: '便利百货',
      //   orderNum: 300,
      //   orderMoney: 9099887,
      //   refundsNum: 3455,
      //   refundsRate: 5.629,
      //   confirmRefundsNum: 2371,
      //   confirmRefundsMoney: 86241,
      //   confirmRefundsRate: 4.232
      // }],

      form: {
        name: '',
        userPswd: '123456',
        phone: '',
        position: ''
      }

    }
  },
  methods: {
    // 渲染数据
    async getAccount(){
      this.tableData = await getAccount()
      
    },
    // 删除
    openDel () {
      this.$confirm('此操作将永久删除该子类别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 停用
    openSto () {
      this.$confirm('此操作将停用该子类别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '停用成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消停用'
        })
      })
    },

    // 编辑
    edit (id) {
      this.dialogVisible = true
      this.form = this.tableData.filter(item => item.id === id)[0]
      // this.form.userPswd='123456'
      console.log(this.form)
    }
  }
}
</script>

<style>
.addBtn{
  float: left;
  margin-bottom: 5px;
}
.el-main[data-v-13877386]{
  line-height: 15px;
}
.el-col-8{
  /* width: 100%; */
}
.el-row{
margin-bottom: 8px;
}

.el-table{

}
.el-table .cell{
    text-align: center;
}
.el-table__header-wrapper{
    /* line-height: 50px; */
}
.el-link{
  margin: auto 4px;
}

</style>
